<template>
  <el-card class="box-card" shadow="never">
    <div style="height: 30px;display: flex;justify-content: space-between;">
      <span style="font-size: 17px;color:#464646">待处理</span>
      <el-link type="primary" :underline="false" @click="tolog">去处理</el-link>
    </div>
    <div class="row" style="cursor: default;" @click="tolog">
      <el-carousel height="72px" direction="vertical" indicator-position="outside">
        <el-carousel-item v-for="( item,index) in unFault" :key="index">
          <p class="medium">主机名:{{ item.hostName }}</p>
          <p class="medium" style="font-size: 12px;">故障日期:{{ formatDate(item.faultDate) }}</p>
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 消息 -->
    <el-divider><i class="el-icon-chat-line-round" /></el-divider>
    <div style="height: 30px;display: flex;justify-content: space-between;">
      <span style="font-size: 17px;color:#464646">公告通知</span>
      <el-link type="primary" :underline="false" @click="toNews">查看更多</el-link>
    </div>
    <div class="box">
      <div v-if="mesList.length === 0" class="empty-box">
        <img src="../../../../assets/nodata.png" alt="No Data" style="width: 200px">
      </div>
      <div v-else>
        <div v-for="(item,index) in mesList" :key="index" class="message_box">
          <el-row>
            <el-col :span="23">
              <el-tag v-if="item.type == 0" type="success" size="small" style="font-size: .8rem;">正常</el-tag>
              <el-tag v-if="item.type == 1" type="danger" size="small" style="font-size: .8rem;">紧急</el-tag>
              <el-tag v-if="item.type == 2" type="warning" size="small" style="font-size: .8rem;">特殊</el-tag>
              <span style="font-size: .9rem;color:#383838;margin-left: 10px">{{ item.title }}</span></el-col>
          </el-row>
          <el-row class="data">
            <el-col :span="2"><svg-icon icon-class="date" class="svg" /></el-col>
            <el-col :span="22"><span style="font-size: 0.8rem;color:#808080">{{ formatDate(item.updateTime) }}</span></el-col>
            <el-divider />
          </el-row>
        </div>
      </div>
    </div>

  </el-card>
</template>

<script>
import { mapGetters } from 'vuex'
import { getUnFault } from '@/api/fault.js'
import { getNews } from '@/api/news.js'
import { formatDate } from '@/utils/index.js'

export default {
  name: 'Message',

  data() {
    return {
      mesList: [],
      unFault: []
    }
  },
  computed: {
    ...mapGetters([
      'nickname'
    ])
  },
  mounted() {
    this.getUnFault()
    this.getNews()
  },
  methods: {
    formatDate,
    load() {
      this.count += 2
    },
    tolog() {
      this.$router.push('/operation/operationfault')
    },
    toNews() {
      this.$router.push('/news')
    },
    async getUnFault() {
      const res = await getUnFault()
      this.unFault = res
      // console.log('getUnFault', res)
    },
    async getNews() {
      const res = await getNews()
      // console.log('getNews', res)
      this.mesList = res.records
    }
  }

}
</script>

<style scoped lang="scss">
.empty-box{
  display: flex;
  margin-top: 100px;
  justify-content: center;
}
.svg{
  width: .9em;
  height: .9em;
  margin-left: 8px;
}
.style_font1{
  font-size: 17px;
  font-weight: bold;
  color: #383838;
}
.box-card{
  border-radius: 20px;
  border: 0;
  .box{
    height: 415px;
    overflow-y: auto;
  }
    /* 自定义滚动条的样式 */
  .box::-webkit-scrollbar {
    height: 8px;
    width: 7px;
    background-color: #E5EFFD; /* 滚动条的背景颜色 */
  }

  .box::-webkit-scrollbar-thumb {
    background-color: #2A82E4; /* 滚动条滑块的颜色 */
    border-radius: 4px; /* 滚动条滑块的圆角 */
  }
  .message_box{
    height: 60px;
    .data{
      padding-top:5px;
    }
  }

}
</style>
